<div id="donate-via-paypal">
  <div id="smart-button-container">
    <p
      id="descriptionError"
      style="visibility: hidden; color: red; text-align: center; display: none"
    >
      Please enter a description
    </p>
    <p
      id="priceLabelError"
      style="visibility: hidden; color: red; text-align: center; display: none"
    >
      Please enter a price
    </p>
    <p
      id="invoiceidError"
      style="visibility: hidden; color: red; text-align: center; display: none"
    >
      Please enter an Invoice ID
    </p>
    <table class="key-value-table mx-auto mb-4">
      <tr>
        <th class="pr-4">
          <label for="description">Description</label>
        </th>
        <td>
          <input
            type="text"
            name="descriptionInput"
            id="description"
            maxlength="127"
            value=""
          />
        </td>
      </tr>
      <tr>
        <th class="pr-4">
          <label for="amount">Donation Amount</label>
        </th>
        <td>
          <input name="amountInput" type="number" id="amount" value="" /><span>
            USD</span
          >
        </td>
      </tr>
      <tr id="invoiceidDiv">
        <th class="pr-4">
          <label for="invoiceid">Invoice ID (optional)</label>
        </th>
        <td>
          <input
            name="invoiceid"
            maxlength="127"
            type="text"
            id="invoiceid"
            value=""
          />
        </td>
      </tr>
    </table>
    <div id="paypal-button-container"></div>
  </div>
  <script
    src="https://www.paypal.com/sdk/js?client-id=AQZEoTLIsBr8cwqlNpUubKhXRm6qFxWOUi-fzJsb-kWai3KV4_ewR8HkSGyKEjG7h2yo1kyxuIjt3KO2&currency=USD"
    data-sdk-integration-source="button-factory"
  ></script>
  <script>
    function initPayPalButton() {
      var description = document.querySelector(
        "#smart-button-container #description"
      );
      var amount = document.querySelector("#smart-button-container #amount");
      var descriptionError = document.querySelector(
        "#smart-button-container #descriptionError"
      );
      var priceError = document.querySelector(
        "#smart-button-container #priceLabelError"
      );
      var invoiceid = document.querySelector(
        "#smart-button-container #invoiceid"
      );
      var invoiceidError = document.querySelector(
        "#smart-button-container #invoiceidError"
      );
      var invoiceidDiv = document.querySelector(
        "#smart-button-container #invoiceidDiv"
      );

      var elArr = [description, amount];

      // if (invoiceidDiv.firstChild.innerHTML.length > 1) {
      //   invoiceidDiv.style.display = "block";
      // }

      var purchase_units = [];
      purchase_units[0] = {};
      purchase_units[0].amount = {};

      function validate(event) {
        return event.value.length > 0;
      }

      paypal
        .Buttons({
          style: {
            color: "gold",
            shape: "rect",
            label: "paypal",
            layout: "vertical",
          },

          onInit: function (data, actions) {
            actions.disable();

            if (invoiceidDiv.style.display === "block") {
              elArr.push(invoiceid);
            }

            elArr.forEach(function (item) {
              item.addEventListener("keyup", function (event) {
                var result = elArr.every(validate);
                if (result) {
                  actions.enable();
                } else {
                  actions.disable();
                }
              });
            });
          },

          onClick: function () {
            if (description.value.length < 1) {
              descriptionError.style.visibility = "visible";
              descriptionError.style.display = "block";
            } else {
              descriptionError.style.visibility = "hidden";
              descriptionError.style.display = "none";
            }

            if (amount.value.length < 1) {
              priceError.style.visibility = "visible";
              priceError.style.display = "block";
            } else {
              priceError.style.visibility = "hidden";
              priceError.style.display = "none";
            }

            if (
              invoiceid.value.length < 1 &&
              invoiceidDiv.style.display === "block"
            ) {
              invoiceidError.style.visibility = "visible";
              invoiceidError.style.display = "block";
            } else {
              invoiceidError.style.visibility = "hidden";
              invoiceidError.style.display = "none";
            }

            purchase_units[0].description = description.value;
            purchase_units[0].amount.value = amount.value;

            if (invoiceid.value !== "") {
              purchase_units[0].invoice_id = invoiceid.value;
            }
          },

          createOrder: function (data, actions) {
            return actions.order.create({
              purchase_units: purchase_units,
            });
          },

          onApprove: function (data, actions) {
            return actions.order.capture().then(function (details) {
              window.location.href = "/thankyou";
            });
          },

          onError: function (err) {
            console.log(err);
            alert(err);
          },
        })
        .render("#paypal-button-container");
    }
    initPayPalButton();
  </script>
</div>
